<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>YP.ShO购</title>
		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		<link rel="stylesheet" href="css/bootstrap.css"></link>
		<link rel="stylesheet" href="css/style.css"></link>
		<link rel="stylesheet" href="css/megamenu.css"></link>
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easydropdown.js"></script>
		
		<script type="text/javascript" src="js/megamenu.js"></script>
		<script type="text/javascript" src="js/amount.js"></script>
		<script type="text/javascript">$(document).ready(function(){$(".megamenu").megamenu()});</script>
		<link rel="stylesheet" href="css/etalage.css"></link>
		<script src="js/jquery.etalage.min.js"></script>
		<script>
			jQuery(document).ready(function($){

				$('#etalage').etalage({
					thumb_image_width: 300,
					thumb_image_height: 200,
					source_image_width: 900,
					source_image_height: 1200,
					show_hint: true,
					click_callback: function(image_anchor, instance_id){
						alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
					}
				});

			});
			
			
		</script>
	</head>
	<body>
		<%@include file="common/head.jsp"%>
			<div class="menu">
				<div class="container">
					<div class="menu_box">
						<ul class="megamenu skyblue">
							<li>
								<a class="color2" href="index.jsp">Home</a>
							</li>
							
							
							<div class="clearfix">
							</div>
						</ul>
					</div>
				</div>
			</div>
			<div class="men">
				<div class="container">
					<div class="single_top">
						<div class="col-md-9 single_right">
							<div class="grid images_3_of_2">
								<ul id="etalage">
									<li>
										<a href="optionallink.html">
										<s:if test="detail.img==null||detail.img==''">
											<img class="etalage_thumb_image" src="images/pic1.jpg" class="img-responsive" /> <img class="etalage_source_image" src="images/pic1.jpg" class="img-responsive" title="" /> 
										</s:if><s:else>
											<img class="etalage_thumb_image" src="<s:property value="detail.img"/>" class="img-responsive" /> <img class="etalage_source_image" src="<s:property value="detail.img"/>" class="img-responsive" title="" /> 
										</s:else>
										</a>
									</li>
									<!-- <li>
										<img class="etalage_thumb_image" src="images/pic1.jpg"class="img-responsive" />
										<img class="etalage_source_image" src="images/pic1.jpg"class="img-responsive" title="" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/pic1.jpg"class="img-responsive" />
										<img class="etalage_source_image" src="images/pic1.jpg"class="img-responsive" title="" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/pic1.jpg"class="img-responsive" />
										<img class="etalage_source_image" src="images/pic1.jpg"class="img-responsive" title="" />
									</li>
									<li>
										<img class="etalage_thumb_image" src="images/pic1.jpg"class="img-responsive" />
										<img class="etalage_source_image" src="images/pic1.jpg"class="img-responsive" title="" />
									</li> -->
								</ul>
								<div class="clearfix"></div>
							</div>
							<div class="desc1 span_3_of_2">
								<h1>
									${detail.goodsname}
								</h1>
								<p class="m_5">
									￥ ${detail.price}
								</p>
								<div class="btn_form">
									<form action="checkOrder.action" method="post" id="buy">
										<div style="text-align:center;margin:0 auto;height:50px">
											<div style="display:inline;float:left">购买数量</div>&nbsp;&nbsp;
											<div style="display:inline;float:left"><input class="sdddq" name="amount"  id="amount" value="1" style="width:100px"/></div>
										</div></p>
										<div>
											<input type="button" value="购买" title="" onclick="buy()" style="background: #e05b5b;"/>
											<input class=".btn_form form input" type="button" value="加入购物车" title="" onclick="addToCart()"/>
										</div>
										<input type="hidden" id="gid" name="gid" value="${detail.id}"/>
									</form>
								</div>
								
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="col-md-3">
							<!-- FlexSlider -->
							<section class="slider_flex">
							<!-- <div class="flexslider">
								<ul class="slides">
									<li>
										<img src="images/pic1.jpg" class="img-responsive" alt="" />
									</li>
									<li>
										<img src="images/pic1.jpg" class="img-responsive" alt="" />
									</li>
									<li>
										<img src="images/pic1.jpg" class="img-responsive" alt="" />
									</li>
									<li>
										<img src="images/pic1.jpg" class="img-responsive" alt="" />
									</li>
								</ul>
							</div> -->
							</section>
							<!-- FlexSlider -->
						</div>
						<div class="clearfix">
						</div>
					</div>
					<div class="toogle">
						<h2>
							商品详情
						</h2>
						<p class="m_text2">
							${detail.remark}
						</p>
					</div>
					
					<!-- <h4 class="head_single">
						相关商品
					</h4>
					<div class="span_3">
						<div class="col-sm-3 grid_1">
							<a href="single.html"> <img src="images/pic1.jpg"
									class="img-responsive" alt="" />
								<h3>
									parum clari
								</h3>
								<p>
									Duis autem vel eum iriure
								</p>
								<h4>
									Rs.399
								</h4> </a>
						</div>
						<div class="col-sm-3 grid_1">
							<a href="single.html"> <img src="images/pic1.jpg"
									class="img-responsive" alt="" />
								<h3>
									parum clari
								</h3>
								<p>
									Duis autem vel eum iriure
								</p>
								<h4>
									Rs.399
								</h4> </a>
						</div>
						<div class="col-sm-3 grid_1">
							<a href="single.html"> <img src="images/pic1.jpg"
									class="img-responsive" alt="" />
								<h3>
									parum clari
								</h3>
								<p>
									Duis autem vel eum iriure
								</p>
								<h4>
									Rs.399
								</h4> </a>
						</div>
						<div class="col-sm-3 grid_1">
							<a href="single.html"> <img src="images/pic1.jpg"
									class="img-responsive" alt="" />
								<h3>
									parum clari
								</h3>
								<p>
									Duis autem vel eum iriure
								</p>
								<h4>
									Rs.399
								</h4> </a>
						</div> -->
						<div class="clearfix"></div>
					</div>
				</div>
			</div>

		<link href="css/flexslider.css" rel='stylesheet' type='text/css' />
		<script defer src="js/jquery.flexslider.js"></script>
		<script type="text/javascript">
			/*$(function() {
				SyntaxHighlighter.all();
			});*/
			$(window).load(function() {
				$('.flexslider').flexslider( {
					animation : "slide",
					start : function(slider) {
						$('body').removeClass('loading');
					}
				});
			});
			
			//加入购物车
			function addToCart(){
				if("${session.loginUser.id}"==${detail.user.id}){
					alert("您不能购买自己销售的商品！");
				} else{
					if("${session.loginUser.name}"!=""){
						var goods = $("#gid").val();
						var amount = $("#amount").val();
						console.log(amount);
						$.ajax({
							url:"addToCart.action",
							data:{goodId:goods,amount:amount},
							type:"post",
							async:"false",
							dataType:"json",
							success:function(data){
								var re = eval(data);
								if(re.result == "success"){
									alert("商品添加成功!");
								}
							}
						})
					}else{
						alert("请您登陆商城后再操作");
					}
				}
			}
		
		//购买过滤
		function buy() {
			if("${session.loginUser.id}"==${detail.user.id}){
				alert("您不能购买自己销售的商品！");
				return false;
			} else{
				if("${session.loginUser.name}"!=""){
					$("#buy").submit();
				}else{
					alert("请您登陆商城后再操作");
					return false;
				}
			}
		}
		</script>

		<%@include file="common/footer.jsp"%>
		<%--<script typ="text/javascript" src="js/detail.js"></script>
	--%></body>
</html>